<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>登录页面</title>
    <style>
        /* 全局样式 */
        body {
            font-family: Arial, sans-serif;
            margin: 0;
            padding: 0;
            background-color: #f4f4f4;
            min-height: 100vh;
            display: flex;
            flex-direction: column;
            justify-content: flex-start;
            align-items: center;
        }

        /* 容器样式 */
       .container {
            width: 100%;
            max-width: 1400px;
            background-color: white;
            padding: 30px;
        }

        /* header 样式 */
        header {
            text-align: center;
            margin-bottom: 30px;
        }

        header img {
            width: 100px;
            height: 100px;
            margin-bottom: 15px;
        }

        /* nav 样式 */
        nav {
            background-color: #3498db;
            color: white;
            padding: 15px;
            margin-bottom: 30px;
        }

        nav ul {
            list-style-type: none;
            margin: 0;
            padding: 0;
            display: flex;
            justify-content: space-around;
        }

        nav ul li a {
            color: white;
            text-decoration: none;
        }

        /* article 样式 */
        article {
            display: flex;
        }

        /* section 样式 */
        section {
            flex: 2;
            background-color: #ecf0f1;
            padding: 20px;
        }

        /* aside 样式 */
        aside {
            flex: 1;
            background-color: #f9f9f9;
            padding: 20px;
            display: flex;
            flex-direction: column;
            justify-content: flex-start;
        }

        /* footer 样式 */
        footer {
            background-color: #34495e;
            color: white;
            text-align: center;
            padding: 15px;
            margin-top: 30px;
        }

        /* 表单样式 */
        form {
            display: flex;
            flex-direction: column;
        }

        form label {
            margin-top: 15px;
            font-size: 18px;
        }

        form input[type="text"],
        form input[type="password"] {
            padding: 15px;
            margin-top: 8px;
            border: 1px solid #ccc;
            border-radius: 5px;
            font-size: 16px;
        }

        form input[type="submit"] {
            margin-top: 30px;
            background-color: #27ae60;
            color: white;
            padding: 15px 30px;
            border: none;
            border-radius: 5px;
            font-size: 18px;
            cursor: pointer;
        }

        /* 在表单下方添加内容的样式 */
       .extra-content {
            margin-top: 30px;
        }

       .extra-content p {
            font-size: 16px;
        }

        /* 视频样式 */
        video {
            width: 100%;
            height: auto;
            margin-bottom: 15px;
        }

        /* 图片样式 */
        aside img,
        form img { /* 新增表单内图片样式 */
            width: 100%;
            height: auto;
            margin-bottom: 15px;
            margin-top: 15px; /* 增加图片上方间距 */
        }

        /* 音频样式 */
        audio {
            width: 100%;
        }
    </style>
</head>

<body>
    <div class="container">
        <header>
            <img src="24.jpg" alt="公司 logo">
            <h1 style="font-size: 36px;">欢迎登录</h1>
        </header>
        <nav>
            <ul>
                <li><a href="#">首页</a></li>
                <li><a href="#">关于我们</a></li>
                <li><a href="#">联系我们</a></li>
                <li><a href="#">帮助中心</a></li>
            </ul>
        </nav>
        <article>
            <section>
                <form>
                    <label for="username">用户名:</label>
                    <input type="text" id="username" required>
                    <label for="password">密码:</label>
                    <input type="password" id="password" required>
                     <!-- 添加图片标签，需替换实际图片路径 -->
                    <input type="submit" value="登录">
                </form>
                <div class="extra-content">
                    <p>还没有账号？<a href="#">立即注册</a></p>
                    <p>忘记密码？<a href="#">找回密码</a></p>
                    <p>使用社交账号登录: 
                        <a href="#"><img src="25.jpg@h_1280" alt="QQ" width="30" height="30"></a>
                        <a href="#"><img src="26.jpg" alt="微信" width="30" height="30"></a>
                    </p>
                    <img src="27.jpg" alt="新增图片" width="900" height="400">
                </div>
            </section>
            <aside>
                <video src="1.mp4" autoplay loop muted></video>
                <img src="2.gif" alt="相关图片">
                <audio src="你的世界.mp3" autoplay loop></audio>
                <p>这里是一些关于网站的简要介绍，让用户更了解我们的服务。</p>
            </aside>
        </article>
        <footer>
            <p>&copy; 2025 版权所有</p>
            <p>地址：XX市XX区XX街道</p>
            <p>联系电话：XXXX-XXXXXXX</p>
        </footer>
    </div>
</body>

</html>